<template>
    <div>

        <el-form :model="form" ref="form" label-width="100px">

            <el-form-item label="选择岗位" label-position="top">
                <el-button style="width: 100px;" @click="Position"><el-icon>
                        <List />
                    </el-icon>選擇數據</el-button>
            </el-form-item>
            <el-form-item label="选择人数" label-position="top">
                 <el-input-number v-model="num" :min="1" :max="20"/>
            </el-form-item>
            <el-form-item label="所在部门" label-position="top">
                <el-button style="width: 100px;"><el-icon>
                        <List />
                    </el-icon>選擇數據</el-button>
            </el-form-item>
            <el-form-item label="岗位职责" label-position="top">
                <el-input v-model="JobResponsibilities" clearable type="textarea" style="width: 560px" :rows="6" />
            </el-form-item>
            <el-form-item label="任职要求" label-position="top">
                <el-input v-model="JobRequirements" clearable type="textarea" style="width: 560px" :rows="6" />

            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-dialog title="选择数据" v-model="isVisible" width="60%">
        <hr />
        <el-row :gutter="20">
            <el-col :span="19">
                <div class="grid-content ep-bg-purple"></div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content ep-bg-purple-light"><el-input placeholder="搜索" style="width: 120px;" clearable>
                        <template #prefix><el-icon class="el-input__icon">
                                <search />
                            </el-icon></template></el-input>

                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content ep-bg-purple-light"><el-popover class="box-item" content="筛选"
                        placement="bottom">
                        <template #reference><el-button size="default" @click=""><el-icon>
                                    <Filter />
                                </el-icon>筛选</el-button></template>

                    </el-popover>
                </div>
            </el-col>

        </el-row>
        <el-table v-loading="loading" element-loading-text="Loading..." :element-loading-spinner="svg"
            element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)"
            :data="tableData" style="width: 100% ; height: 600px;">
            <el-table-column type="selection" width="50"></el-table-column>


            <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width">

            </el-table-column>

        </el-table>
          <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"  :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="400" >
        </el-pagination>
        
        <template #footer>
            <span>
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="">确认</el-button>
            </span>
        </template>
    </el-dialog>

</template>




<script setup>
import { ref } from 'vue'
import { ElMessage ,ElMessageBox} from 'element-plus'
import  ComponentSize from 'element-plus'
const loading = ref(true)
const form = ref({})
const JobResponsibilities = ref('') // 职位职责文本
const JobRequirements = ref('') // 职位要求文本

//*************** */

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const size = ref < ComponentSize > ('default')
const background = ref(false)
const disabled = ref(false) // 
// *************************
const tableData = ref([
    { id: 1, DataTitle: '产品运营', Position: "产品运营", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 2, DataTitle: '产品经理', Position: "产品经理", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 3, DataTitle: '产品开发', Position: "产品开发", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 4, DataTitle: '产品测试', Position: "产品测试", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 5, DataTitle: '产品支持', Position: "产品支持", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 6, DataTitle: '产品经理', Position: "产品经理", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 7, DataTitle: '产品总监', Position: "产品总监", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 8, DataTitle: '产品开发', Position: "产品开发", Section: "产品部", DepartmentHead: '爱丽丝' }
])
const columns = ref([
    { id: 'DataTitle', label: '数据标题', width: '200' },
    { id: 'Position', label: '岗位', width: '200' },
    { id: 'Section', label: '部门', width: '200' },
    { id: 'DepartmentHead', label: '部门主管', width: '200' }

])
const num = ref(1) // 当前人数
const onSubmit = () => {
    ElMessage.success('提交成功')
}
const isVisible = ref(false);
const js = () => {
    setTimeout(() => {
        loading.value = false;
    }, 2000)
}
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `

const Position = () => {
    isVisible.value = true;
    js();
}
// 退出提示
const closeDialog = () => {
  ElMessageBox.confirm(
    '你有正在编辑的数据，确定离开？',
    '注意',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '取消操作',
      })
    })
}


</script>


<style scoped></style>
